<template>
  <el-dialog title="编辑课程编号" :show-close="false" :close-on-click-modal="false" center :visible.sync="courseVisible"
    width="460px">
    <el-form label-width="80px">
      <el-form-item label="课程编号">
        <el-input v-model="courseCode"></el-input>
      </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="courseVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleGenerateBarcode">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
  props: {
    courseCodeData: {
      type: String,
      default: '',
    },
  },
  data () {
    return {
      courseCode: this.courseCodeData,
      courseVisible: false
    }
  },
  computed: {
    ...mapState('page', ['pageData', 'pageLayout']),
  },
  methods: {
    ...mapMutations('page', ['pageData_edit']),
    handleGenerateBarcode () {
      let answerTitle = this.pageData[0]
      this.pageData_edit({
        ...answerTitle,
        content: {
          ...answerTitle.content,
          courseCode: this.courseCode
        },
      })

      this.courseVisible = false

    },
    onOpen () {
      this.courseVisible = true
    }
  },
}
</script>